前言

無論從一開始的單元測試到端對端測試，所撰寫的測試程式的內容皆偏向工程，而無法用於工程人員與使用者或 PM 進行需求上的溝通。這一篇會先說明如何在專案中安裝與設定 Cucumber 相關套件，讓我們可以利用行為驅動開發 (Behavior-driven development, BDD) 的方式進行。

行為驅動開發工具 - Cucumber

行為驅動開發 (Behavior-driven development, BDD) 是在軟體開發中，不同的相關人員利用自然語言來討論與描述對軟體的預期行為。其用於說明軟體功能 (Feature) 中的各種情境 (Scenario)，並利用 Given、And、When 與 Then 等關鍵字來描述單元測試中的準備 (Arrange) 、行動 (Act) 與驗證 (Assert) 等 3A 原則。

Feature: 功能需求

  Scenario: 情境描述
    Given 準備資料
    When 做什麼事
    Then 應該要有什麼預期

而 Cucumber 是一套支援 BDD 的開發工具，其支援了多數的程式語言，我們可以將需求規格寫在 *.feature 檔案內，並針對每步驟利用不同的測試框架來撰寫對應的程式，讓實際的需求與工程化的測試程式可以互相連結。

安裝 Cucumber 套件

首先，在 Terminal 終端機中執行下面 NPM 命令來安裝所需要的套件。

npm install -D @badeball/cypress-cucumber-preprocessor @bahmutov/cypress-esbuild-preprocessor

與報表的設定一樣，接著會在 cypress.config.ts 組態檔案中，設定 Cucumber 前處理器套件。

import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
import createEsbuildPlugin from '@badeball/cypress-cucumber-preprocessor/esbuild';
import * as createBundler from '@bahmutov/cypress-esbuild-preprocessor';

export default defineConfig({
  e2e: {
    ...
    specPattern: ['cypress/features/**/*.feature'],
    async setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
      await addCucumberPreprocessorPlugin(on, config);

      on(
        'file:preprocessor',
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );

      ...

      return config;
    },
  },
});

最後，只要在 package.json 中設定步驟定義的檔案位置。

"cypress-cucumber-preprocessor": {
  "nonGlobalStepDefinitions": true,
  "stepDefinitions": [
    "cypress/steps/**/*.step.{js,ts}"
  ]
},

Vistual Studio Code 設定

順帶一提，在 VSCode 中要撰寫 Cucumber 之前，會安裝 Cucumber (Gherkin) Full Support 套件，並且在組態中加入下面設定：

"cucumberautocomplete.steps": [
  "cypress/steps/**/*.ts",
  "test/features/step_definitions/*.js",
  "node_modules/qa-lib/src/step_definitions/*.js"
],
"cucumberautocomplete.strictGherkinCompletion": true,

利用 Cucumber 撰寫測試規格

安裝與設定完套件之後，我們就可以把 application.cy.ts 的測試內容利用 Cucumber 的方式撰寫。

首先，會依照 Cypress 組態設定中的 specPattern 屬性設定值，在 cypress 資料夾內建立 features 資料夾，將之後所要撰寫的測試規格都放在此資料夾內。因此，接著在此建立 application.feature 檔案，並撰寫 application.cy.ts 內的測試規格。

Feature: 2022 鐵人賽範例

  Scenario: 瀏覽器標題顯示為 2022 鐵人賽範例
    Given 瀏覽 2022 鐵人賽範例首頁
    Then 瀏覽器標題顯示為 "2022 鐵人賽範例"

  Scenario: 顯示標題為 "2022 鐵人賽範例"
    Given 瀏覽 2022 鐵人賽範例首頁
    Then 標題列文字應為 "2022 鐵人賽範例"

  Scenario: 預設載入產品清單頁面
    Given 瀏覽 2022 鐵人賽範例首頁
    Then 應進入商品清單頁面

最後，就為上面的測試規格中，每一個 Given 與 Then 步聚撰寫對應的測試程式。因此，依照 pageage.json 內的 stepDefinitions 參數設定，在 cypress/steps 目錄下建立 application.step.ts 檔案，並在此檔案內撰寫 Feature 檔案內的每個步驟。

import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';

Given('瀏覽 2022 鐵人賽範例首頁', () => {
  cy.visit('/');
});

Then('瀏覽器標題顯示為 {string}', (expected: string) => {
  cy.title().should('eq', expected);
});

Then('標題列文字應為 {string}', (expected: string) => {
  cy.get('[color="primary"]').find('span').contains(expected);
});

Then('應進入商品清單頁面', () => {
  cy.url().should('include', '/product/list');
});

接下來

這一篇說明了在 Cypress 內設定 Cucumber ，並改寫了 application.cy.ts 測試內容，完整的測試程式可以參考 GitHub。接下來，會利用 login.cy.ts 的測試檔案來更進一步說明 Cucumber 的撰寫語法。